<template>
  <PublicPage :showHead="false">
    <view class="goodsDetails" :class="{'disabled': goods.status === 6 && otherUserInfo.isMyself === 1}">
      <view
        :class="scrollTop <= 150?'':'opc0'"
        class="goBack_box"
        :style="'top:'+globalData.menuButtonObject.top+'px;'"
        @click.stop="goBackFn">
        <image v-if="routerlength <= 1" src="@/static/image/goHome_con.png" mode="widthFix" style="width:100%;height:100%;" />
        <image v-else src="@/static/image/goBack_con.png" mode="widthFix" style="width:100%;height:100%;" />
      </view>


      <scroll-view scroll-y style="height:100%;" @scroll="_scrollFn">

        <!-- 作者主页背景图 -->
        <view class="headBox">
          <image :src="otherUserInfo.backgroundUrl" style="width:100%;height:100%;" mode="aspectFill" />
          <view class="headGroupMsg">
            <view class="headGroupBox">
              <view class="u-flex" @click="goHomePage">
                <view class="headImgBox">
                  <image :src="goods.communityLogo || otherUserInfo.communityLogo" mode="aspectFill" style="width:100%;height:100%;border-radius: 50%;" />
                </view>
                <view>
                  <view class="fz-18 fw5 ov1" style="max-width:300rpx;">{{goods.communityName || otherUserInfo.communityName}}</view>
                  <view class="fz-12 u-p-t-8">成员 {{otherUserInfo.memberCount || 0}} 跟团人次 {{otherUserInfo.followGroupCount || 0}}</view>
                </view>
              </view>
              <view class="guanzhuBtn" @click="attention" v-if="otherUserInfo.isMyself===0&&otherUserInfo.followStatus === 0">
                +关注
              </view>
            </view>
          </view>
        </view>
        
        <!-- 吸顶盒子 -->
        <view class="headBoxFixed" :class="scrollTop <= 150?'':'opc1'">
          <view :style="'height:'+globalData.navTop+'px;'"></view>
          <view class="headGroupBox">
            <view class="navBack" @click="goBackFn"><image src="@/static/image/navBack_icon.png" style="width:100%;height:100%;border-radius: 50%;display: block;" /></view>
            <view class="headImgBox">
              <image :src="goods.communityLogo || otherUserInfo.communityLogo" mode="aspectFill" style="width:100%;height:100%;border-radius: 50%;" />
            </view>
            <view class="fz-16 fw5 ov1" style="max-width:250rpx;">{{goods.communityName || otherUserInfo.communityName}}</view>
            <view class="guanzhuBtn" @click="attention" v-if="otherUserInfo.isMyself===0&&otherUserInfo.followStatus === 0">+关注</view>
          </view>
        </view>

        <view v-if="goods.spuId">
          <!-- 商品图片 -->
          <view class="goodsSwiper u-m-t-24 u-m-l-24 u-m-r-24">
            <swiper
              class="swiper"
              circular
              :current="goodsImgCurrent"
              @change="_changeCurrent"
              :style="'height:' + swiperHeight + 'rpx;'"
            >
              <swiper-item v-for="(item, index) in goods.images" :key="index">
                <view
                  class="u-flex u-row-center"
                  style="wiodth: 100%; height: 100%"
                >
                  <image
                    :src="item.url" 
                    style="width: 100%; height: 100%"
                    mode="aspectFill"
                  />
                </view>
              </swiper-item>
            </swiper>
            <!-- 指示点 -->
            <view class="indicator"
              >{{ goodsImgCurrent + 1 }}/{{ goods.images.length }}</view
            >
          </view>

          <view class="goodsMsg u-m-t-24 u-m-l-24 u-m-r-24">
            <!-- 价格|倒计时 -->
            <view class="pliceBox">
              <view class="themeFontColor">
                <text class="fw5" v-if="goods.minSalePrice === goods.maxSalePrice">
                  <text>￥</text>
                  <text class="fz-24">{{ goods.minSalePrice }}</text>
                </text>
                <text class="fw5" v-if="goods.minSalePrice !== goods.maxSalePrice">
                  <text>￥</text>
                  <text class="fz-24"
                    >{{ goods.minSalePrice }} ~ {{ goods.maxSalePrice }}</text
                  >
                </text>

                <text
                  v-if="goods.marketPrice"
                  class="fz-12 u-p-l-20 colorc"
                  style="text-decoration-line: line-through"
                  >￥{{ goods.marketPrice || 0 }}</text
                >
              </view>
              <view class="buyBtn disabled fz-12" v-if="goods.status === 6">商品已下架</view>
              <view class="buyBtn disabled fz-12" v-else-if="goods.status === 7">商品已失效</view>
              <view class="themeFontColor buyBtn fz-12" v-else  @click="_snapUp()">立即购买</view>
            </view>
            <!-- 名称|标题 -->
            <view class="nameBox">
              {{ goods.goodsName }}
            </view>
            <view class="descriptionBox" v-if="goods.description">
              {{ goods.description }}
            </view>
          </view>

          <view class="instruction u-m-t-24 u-m-l-24 u-m-r-24" v-if="goods.maxCommission || goods.maxCommission === 0 || goods.commissionRatio || goods.commissionRatio === 0">
            <view style="color: #ED6A0C;">本商品已开启帮卖（仅帮卖可见）</view>
            <view class="fz-12 u-p-t-8" v-if="goods.maxCommission || goods.maxCommission === 0">
              我的佣金：
              <text class="themeFontColor fz-18">{{goods.mixCommission === goods.maxCommission ? goods.maxCommission : goods.mixCommission + '~' + goods.maxCommission}}<text class="fz-12">元</text></text>
            </view>
            <view class="fz-12 u-p-t-8 u-flex" v-if="goods.commissionRatio || goods.commissionRatio === 0">
              <view style="flex:1;flex-shrink: 0;">
                从<text>{{goods.type === 1 ? '商品售价' : '我的佣金'}}</text>中分给下级帮卖 {{goods.commissionRatio}}%，下级出单后我赚
                <text class="themeFontColor fz-18 u-p-l-8">{{myPlice1 === myPlice2 ? myPlice1 || 0 : myPlice1 + '~' + myPlice2}}<text class="fz-12">元</text></text>
              </view>
              <view class="fz-10 editBtn1" @click="childShow = true">修改</view>
            </view>
          </view> 
          
          <!-- 存在运费模板并且有不发货地区 -->
          <view class="materialBox u-m-t-24 u-m-l-24 u-m-r-24" v-if="goods.freightType === 3 && goods.notShippedArea">
            <view class="justify-between items-center linh-44 px32">
              <view class="fw5">不配送地区</view>
              <view class="viceColor u-flex" @click.stop="notShippedAreaShow = true">
                <view class="ov1" style="max-width:380rpx;">{{goods.notShippedArea || ""}}</view>
                <icon class="iconfont icon-arrow_right" />
              </view>
            </view>
          </view>

          <!-- 带货笔记 -->
           <view class="materialBox u-m-t-24 u-m-l-24 u-m-r-24" v-if="materialList && materialList.length">
             <view class="justify-between items-center px32 linh-48">
               <view class="fw5">带货笔记(仅帮卖可见)</view>
               <view class="viceColor fz-12" @click="navigateTo({url: `/pagesB/takeNotes/index?spuId=${goods.spuId}&shopWindowId=${goods.shopWindowId}`})">查看更多<icon class="iconfont icon-arrow_right" style="vertical-align: bottom;" /></view>
             </view>
             <scroll-view scroll-x>
                <view class="flex-row">
                  <view v-for="(item,index) in materialList" :key="index" class="materialForBox">
                    <view class="materialImage">
                      <image :src="item.thumbnail" style="width:100%;height:100%;" mode="aspectFill" />
                      <view class="posabNum">
                        <image style="width:32rpx;height:32rpx;" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/play_icon1.png"/>
                        <view class="fz-10 u-p-l-4">{{item.useCount}}</view>
                      </view>
                    </view>
                    <view class="justify-between items-center u-p-t-24 u-p-b-32">
                      <view class="u-flex">
                        <image class="forImage" :src="item.communityLogo" mode="aspectFill" />
                        <view class="viceColor fz-12 u-p-l-8">{{item.communityName}}</view>
                      </view>
                      <view class="fuyonBtn" @click="_copyMaterial(item)">复用</view>
                    </view>
                  </view>
                  <view class="px32 items-center viceColor" style="height:300rpx;" v-if="materialList.length >= 5" @click="navigateTo({url: `/pagesB/takeNotes/index?spuId=${goods.spuId}&shopWindowId=${goods.shopWindowId}`})">
                    <view><icon class="iconfont icon-arrow_left fz-24" /></view>
                    <view class="fz-16 tc" style="width:56rpx;">点击查看更多</view>
                  </view>
                </view>
             </scroll-view>
           </view>

          <!-- 跟团记录 -->
          <view class="goodsShopBox u-m-t-24 u-m-l-24 u-m-r-24" v-if="shopList.length">
            <view class="u-p-t-24 u-p-b-24">跟团记录</view>
            <view
              v-if="shopList.length"
              v-for="(shop, idx) in shopList"
              :key="idx"
              class="linh-40 shopForBox fz-12"
            >
              <view class="shopName">
                <view class="viceColor" style="min-width:50rpx;">{{ shop.followGroupNum }}</view>
                <view class="u-m-l-20 headBox1">
                  <image
                    :src="shop.avatar"
                    mode="aspectFill"
                    style="width: 100%; height: 100%; display: block"
                  />
                </view>
                <view class="u-m-l-20 u-m-r-20">{{ shop.nickname }}</view> 
                <view class="viceColor u-p-r-20 skuContent">
                  <text class="skuName">{{ shop.skuName }}</text>
                  <text>*{{ shop.count }}</text>
                </view>
              </view>
              <view class="viceColor">{{ showTimeFn(shop.buyTime) }}</view>
            </view>
            <view class="tc fz-12 viceColor u-p-t-16 u-p-b-16" @click.stop="_getMoreShopList">
              <view v-if="loadLogin && shopList.length && !finish">{{getMoreLoading ? '加载中...' : '查看更多'}}<u-icon v-show="!getMoreLoading" name="arrow-down" class="u-m-l-12" /></view>
            </view>
            <view style="height: 400rpx;width:100%;background-color: #fff;" v-if="!shopList.length && loadLogin">
              <DefaultPage type="4" tips="一大波人正在赶来" />
            </view>
          </view>


          <view class="goodsDetailsPage" v-if="goods.goodsDetailsPage && goods.goodsDetailsPage.length">
            <image v-for="(imagesItem,imageIndex) in goods.goodsDetailsPage" :key="imageIndex" :src="imagesItem" mode="widthFix" style="width:100%;height:auto;display:block;" />
          </view>

          <view class="u-p-t-20"></view>
        </view>
        <view style="height: calc(100% - 500rpx);" v-if="goods.accountId && !goods.spuId">
          <DefaultPage type="2" tips="该商品不见了，看看其他商品吧～"/>
        </view>
      </scroll-view>


      <!-- 按钮组----------------------start -->
      <!-- 普通状态商品详情 -->
      <view class="fixedBottomBtn tc fz-16" @click="_snapUp()" v-if="goods.status === 1">立即抢购<text class="u-p-l-20">￥{{ goods.minSalePrice }}</text></view>

      <!-- 一级帮卖状态 未帮卖 || 二级帮卖状态 未帮卖 -->
      <view class="fixedBottomBtn tc fz-16 u-flex" v-if="goods.status === 2">
        <view style="width:50%;height:100%;background: #FB9551;" class="flex-col justify-center"  @click="_snapUp()">
          <view style="line-height:initial;">供货价购样</view>
          <view style="line-height:initial;" class="fz-10" v-if="goods.maxCommission">立即省￥{{goods.mixCommission === goods.maxCommission ? goods.maxCommission : goods.mixCommission + '~' + goods.maxCommission}}</view>
        </view>
        <view style="width:50%;height:100%;" class="flex-col justify-center" @click="immediatelyHelpSell">
          <view style="line-height:initial;">立即帮卖</view>
          <view style="line-height:initial;" class="fz-10" v-if="goods.maxCommission">预计赚￥{{goods.mixCommission === goods.maxCommission ? goods.maxCommission : goods.mixCommission + '~' + goods.maxCommission}}</view>
        </view>  
        <view class="helpSellTips" v-if="goods.helpSaleNumber">{{goods.helpSaleNumber}}人正在帮卖</view>
        <view class="helpSellTips" v-else>一大波人正在赶来</view>
      </view>

      <!-- 一级帮卖状态 已帮卖 || 供货（允许帮卖） -->  
      <view class="fixedBottomBtn tc fz-16 u-flex" v-if="goods.status === 3">
        <view style="width:50%;background: linear-gradient(90deg, #FDEDC7 0.12%, #FEDFA6 100%);color:#B57A43;" @click="inviteHelp">邀请帮卖</view>
        <view style="width:50%;height:100%;" class="flex-col justify-center" @click="_shareNow">
          <view style="line-height:initial;">立即分享</view>
          <view style="line-height:initial;" class="fz-10" v-if="myPlice1 && goods.type !== 1">预计赚￥{{goods.mixCommission === goods.maxCommission ? goods.maxCommission : goods.mixCommission + '~' + goods.maxCommission}}</view>
        </view> 
      </view>

      <!-- 二级帮卖状态 已帮卖 || 供货（不允许帮卖） -->
      <view class="fixedBottomBtn tc fz-16 flex-col justify-center" @click="_shareNow" v-if="goods.status === 4">
        <view style="line-height:initial;">立即分享</view>
        <view style="line-height:initial;" class="fz-10" v-if="myPlice1 && goods.type !== 1">预计赚￥{{goods.mixCommission === goods.maxCommission ? goods.maxCommission : goods.mixCommission + '~' + goods.maxCommission}}</view>
      </view>

      <view class="fixedBottomBtn tc fz-16" v-if="goods.status === 5 && goods.myShopWindowId" @click="redirectTo({url: `/pagesB/goods/goodsDetails?shopWindowId=${goods.myShopWindowId}`})">前往我的帮卖商品</view>
      <!-- 商品已下架 -->

      <view class="fixedBottomBtn tc fz-16 disabledBtn" v-if="goods.status === 6">
        <view class="posab" @click="navigateTo({url: `/pagesA/libraryGoods/libraryGoods`})" v-if="otherUserInfo.isMyself === 1">
          <view class="colorZS">当前商品已下架，可前往商品库重新上架</view>
          <view>商品库<u-icon name="arrow-right" color="#969799" class="u-p-l-8" /></view>
        </view>
        商品已下架
      </view>
      <!-- 商品已失效 -->
      <view class="fixedBottomBtn tc fz-16 disabledBtn" v-if="goods.status === 7">商品已失效</view>
      <!-- 按钮组----------------------end -->


      <!-- 确认订单 -->
      <ConfigOrder
        :show="configOrderShow"
        :videoItem="{dynamicId: routeData.dynamicId || ''}"
        :goodsSpu="goods.spuId" 
        :shopWindowId="routeData.shopWindowId"
        @close="configOrderShow = false"
        @paySuccessFn="paySuccessFn"
      />

      <!-- 支付成功 -->
      <PaySuccess
        :show="paySuccessType"
        :orderDetailsData="orderDetailsData"
        @connectionFn="connectionFn"
        @goToOrderDetailsFn="goToOrderDetailsFn"
        @closePaySuccessFn="paySuccessType = false"
      />

      <!-- 设置下级帮卖 -->
      <SetChild :show="childShow" :item="goods" :type="2" @success="_addSuccess" @close="childShow = false" />

      <!-- 是否加入橱窗 -->
      <Modal 
      :show="editIsShopWindow" 
      title="none"
      content="当前商品暂未加入橱窗，是否立即加入橱窗后邀请帮卖" 
      configText="加入并邀请"
      @close="editIsShopWindow = false" 
      @config="_inviteHelpShare" />



      <!-- 分享相关分割线····················································start -->
      <!-- 分享海报绘制 -->
      <OpenGroupSharing ref="shareChild" @shareSuccess="_shareSuccess" />
      <PublishPopup v-if="isPublishPopup" :sharePublishData="sharePublishData" @customInvite="_customInvite" @closeSharePublishFn="(flag)=>isPublishPopup=flag"/>
      <!-- 点击立即邀请朋友参团之后弹框 -->
      <SharePopup v-if="dlShare" :shareObject="{title: goods.goodsName,url: shareObj.isShareType === 2 ? shareUrl2 : shareUrl1}" @close="dlShare=false" @drawPoster="_drawPoster" />
      <!-- 保存相册海报分享 -->
      <SharePoster
          v-if="dlPoster"
          :shareVideoData="shareObj"
          @cancelSharePosterFn="dlPoster=false"
      />
      <!-- 申请帮卖关系 -->
      <ApplyForHelpSelling
        v-if="isHelpSellingShow"
        :show="isHelpSellingShow"
        :othersInfoData='otherUserInfo'
        :routeData="routeData"
        :getRelationType="getRelationType"
        @cancelFn="isHelpSellingShow = false"
      />

      <!-- 不包邮地址 -->
      <u-popup v-model="notShippedAreaShow" mode="bottom">
        <view style="min-height: 40vh;">
          <view class="tc fz-16 fw5 linh-48" style="position: relative;">
            不配送地区
            <icon class="iconfont icon-close fz-22" style="color:#C8C9CC;position: absolute;right: 28rpx;top: 0;" @click="notShippedAreaShow = false" />
          </view>
          <view class="px32 linh-36 fz-12" style="background: #FFFBE8;color: #ED6A0C;">以下地区不配送</view>
          <view class="px32 u-p-t-32 u-p-b-32 fw5">{{goods.notShippedArea || ""}}</view>
        </view>
      </u-popup>

      <!-- 复用笔记 -->
      <Modal 
      :show="clickMaterial.modelShow"
      title="复用带货笔记"
      :content="clickMaterial.content" 
      configText="立即复用"
      @close="clickMaterial.modelShow = false" 
      @config="_configCopyMaterial" />
    </view>
  </PublicPage>
</template>

<script>
import PublicPage from "@/components/publicPage/index.vue";
import DefaultPage from "@/components/defaultPage/index.vue";
import ConfigOrder from "@/pagesB/dynamic/configOrder.vue";
import PaySuccess from "@/pagesB/dynamic/paySuccess.vue";  // 支付成功
import SetChild from "@/pagesB/goods/setChild.vue";
import Modal from '@/components/modal/index.vue'
import PublishPopup from '@/components/publishPopup/index.vue'

import OpenGroupSharing from "@/components/shareImage/openGroupSharing.vue"
import SharePopup from '@/pages/stream/components/sharePopup.vue'
import SharePoster from '@/components/shareModal/sharePoster.vue'
import ApplyForHelpSelling from "@/pagesB/components/applyForHelpSelling.vue";

import goods from "@/api/goods.js";
import dynamic from "@/api/dynamic.js";
import orderApi from "@/api/orderApi.js";
import release from "@/api/release.js";
import Util from "@/api/util.js";
import User from '@/api/user.js'
import { numMulti,numSub,numDiv } from "@/utils/calculate";

export default {
  components: {
    PublicPage,
    DefaultPage,
    ConfigOrder,
    PaySuccess,
    SetChild,
    Modal,
    PublishPopup,
    OpenGroupSharing,
    SharePopup,
    SharePoster,
    ApplyForHelpSelling
  },
  computed: {
    globalData() {
      return this.$store.state.globalData;
    },
    userInfo () {
      return this.$store.state.userInfo
    },
    // store中的关注后对象
    followTypeObj() {
      return this.$store.state.followTypeObj
    }
  },
  watch:{
    isLogin(nval,oval){
      if(nval !== oval && nval){ // 登录状态更新,从未登录到登录
        this._getGoodsDetails();
      }
    },
    followTypeObj(nVal) {
      if (nVal) {
        if (this.otherUserInfo.accountId === nVal.accountId) {
          this.otherUserInfo.followStatus = nVal.followStatus
        }
      }
    }
  },
  data() {
    return {
      scrollTop: 0,
      routerlength: 1,
      goodsEndStatus: false, // 团是否已经结束
      swiperHeight: 750,
      goodsImgCurrent: 0,
      routeData: {},
      goods: {
        goodsName: "",
        images: [],
        goodsDetailsPage: [],
        marketPrice: "",
        maxSalePrice: "",
        minSalePrice: "",
      }, // 商品详情
      otherUserInfo:{}, // 作者用户信息

      endDay: 0,
      endHr: 0,
      endMin: 0,
      endSec: 0,
      getParams: {},
      shopList: [], // 跟团记录
      loadLogin: false, // 是否首次加载完成
      finish: false, // 是否加载更多
      configOrderShow: false,
      
      paySuccessType: false, // 支付成功弹窗
      orderDetailsData: {}, // 支付成功订单详情
      myPlice1: 0, // 下级出单你赚多少
      myPlice2: 0, // 下级出单你赚多少
      childShow: false, // 修改下级
      editIsShopWindow: false, // 加入橱窗弹窗

      // 分享相关分割线····················································start
      isPublishPopup: false, // 显示帮卖成功弹窗
      sharePublishData: {}, // 帮卖成功弹窗数据
      dlShare: false, // 分享小图片
      shareUrl1: "",// 普通分享小图片
      shareUrl2: "",// 邀请帮卖小图片
      dlPoster: false, // 海报分享
      shareObj: {},// 海报生成所需数据
      isHelpSellingShow: false,
      getRelationType: 0, // 帮卖关系
      // 分享相关分割线····················································end

      materialList: [], // 商品相关笔记列表
      clickMaterial: {
        modelShow: false,
        materialId: "", 
        content: ""
      },
      notShippedAreaShow: false
    };
  },
  async onLoad(options) {
    console.log(options);
    // uni.setNavigationBarColor({
      //   frontColor: "#ffffff",
    //   backgroundColor: "#ffffff",
    //   animation: {
      //     duration: 400,
    //     timingFunc: "easeIn",
    //   },
    // });

    this.routerlength = getCurrentPages().length
    await this.isLoSignInFn(options) // 分享参数处理
    this.routeData = this.$store.state.shareRouteData
    if(this.routeData.applyForHelp && !this.isLogin){ // 未登录先弹窗诱使用户登录
      this.isHelpSellingShow = true
    }
    this._getGoodsDetails();
  },
  onShareAppMessage(res) {
    let _shareObj =  {
      title: this.goods.goodsName || '快来看看吧',
      imageUrl: this.shareUrl1 || this.goods.images[0],
      path: `pagesB/goods/goodsDetails?shopWindowId=${this.routeData.shopWindowId}&shareType=true&idCode=${this.$store.state.userInfo.idCode}`
    }
    if(res.from === 'button' && this.shareObj.isShareType === 2){ // 邀请帮卖
      _shareObj.imageUrl = this.shareUrl2 || this.goods.images[0]
      _shareObj.path = `pagesB/goods/goodsDetails?shopWindowId=${this.routeData.shopWindowId}&shareType=true&applyForHelp=true&idCode=${this.$store.state.userInfo.idCode}`
    }
    console.log(JSON.parse(JSON.stringify(_shareObj)),'分享参数')
    return _shareObj
  },
  methods: {
    // 获取商品详情
    _getGoodsDetails() {
      const that = this

      goods.getNewGoodsDetails(this.routeData).then((res) => {
        // 商品详情-回显
        that.goods = res.data;
        that.goods.images = JSON.parse(that.goods.images);
        that.goods.shopWindowId = JSON.parse(JSON.stringify(that.routeData.shopWindowId))

        // 商详处理，兼容老数据
        const { goodsDetailsPage } = res.data
        that.goods.goodsDetailsPage = []
        if(goodsDetailsPage){
          if(goodsDetailsPage.substr(0, 1) == "["){ // 新数据，图片数组
            that.goods.goodsDetailsPage = JSON.parse(goodsDetailsPage)
          }else{ // 老数据，富文本  
            let regex = new RegExp(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi); // /(?<=(src="))[^"]*?(?=")/ig 此正则ios不支持
            goodsDetailsPage.replace(regex, function (match, capture) {
              that.goods.goodsDetailsPage.push(capture) // 所有图片路径，包括已上传
              return match
            })
          }
        }
        

        console.log(JSON.parse(JSON.stringify(that.goods)))

        that.getOthersInfoFn(res.data.accountId)
        that._getShopList();
        that._getMaterialList();
        // 自营取商品售价,非自营取佣金
        that.goods.commissionRatio = that.goods.type === 2 ? numMulti(numDiv(that.goods.maxSubordinateCommission,that.goods.maxCommission,2),100,0) : that.goods.commissionRatio
        let plice1 = that.goods.type === 1 ? that.goods.minSalePrice : that.goods.mixCommission
        let plice2 = that.goods.type === 1 ? that.goods.maxSalePrice : that.goods.maxCommission
        const baifenbi = numMulti(that.goods.commissionRatio, 0.01, 2); // 百分比
        that.myPlice1 = baifenbi === 0 ? plice1 : numSub(plice1,numMulti(plice1, baifenbi, 2));
        that.myPlice2 = baifenbi === 0 ? plice2 : numSub(plice2,numMulti(plice2, baifenbi, 2));
        

        // 分享相关分割线····················································start
        // 绘制分享小图片
        const canvasData = {
          isGoods: true,
          userAvatar: that.goods.communityLogo,// 团长头像
          userNickname: that.goods.communityName,// 名字
          bgImgUrl: that.goods.images[0].url,// 背景图片
          btnText: '跟团购买',
          salePrice: that.goods.minSalePrice,
          type: 1,
          followGroupNumber: that.goods.saleCount > 0 ? Util.playvolume(that.goods.saleCount) + '人跟团中' : '一大波人赶来中'
        }

        // 海报参数
        that.shareObj = {
          communityLogo: canvasData.userAvatar,
          communityName: canvasData.userNickname,
          isGoods: true, // 是否是商品
          title: that.goods.goodsName,
          shopWindowId: that.goods.shopWindowId,
          page: 'pagesB/goods/goodsDetails',
          isShareType: 1,
          thumbnail: that.goods.images[0].url,
          minSalePrice: that.goods.minSalePrice,
          maxSalePrice: that.goods.maxSalePrice,
          marketPrice: that.goods.marketPrice,
          totalBuyCount: that.goods.saleCount,
          options: {
            shopWindowId: that.goods.shopWindowId,
            shareType: true
          }
        }

        that.$nextTick(()=>{
          that.$refs.shareChild.shareFrends(canvasData) // 绘制分享小图片
        })
        // 分享相关分割线····················································end
      });
    },
    //  分享相关分割线····················································start
    // 分享小图片绘制成功
    _shareSuccess(e){
      if(!this.shareUrl1){ // 普通分享小图片
        this.shareUrl1 = e.url
      }
      if(this.shareObj.isShareType === 2){ // 邀请帮卖小图片
        this.shareUrl2 = e.url
        this.dlShare = true  // 弹窗邀请帮卖分享
      }


      if(this.routeData.helpSuccess){// 弹出帮卖成功弹窗
        this.sharePublishData.url = e.url
        this.sharePublishData.title = this.goods.goodsName
        this.sharePublishData.type = 4
        this.routeData.helpSuccess = false
        this.isPublishPopup = true
      }
    },
    // 帮卖成功弹窗，点击立即邀请团员参团
    _customInvite(){
      this.isPublishPopup = false
      this.dlShare = true 
    },
    // 帮卖成功弹窗，点击生成海报
    _drawPoster(){
      this.dlShare = false 
      this.dlPoster = true
    },
    // 弹出邀请帮卖分享弹窗
    _openShareHelpProfit(){
      this.shareObj.isShareType = 2 //邀请帮卖
      if(!this.shareUrl2){ // 避免重复生成
        const canvasData = {
          isGoods: true,
          userAvatar: this.goods.communityLogo,// 团长头像
          userNickname: this.goods.communityName,// 名字
          bgImgUrl: this.goods.images[0].url,// 背景图片
          btnText: '帮卖立赚',
          salePrice: this.goods.minSalePrice,
          type: 2,
          followGroupNumber: this.goods.saleCount > 0 ? Util.playvolume(this.goods.saleCount) + '人跟团中' : '一大波人赶来中'
        }
        this.$nextTick(()=>{
          this.$refs.shareChild.shareFrends(canvasData) // 绘制分享小图片
        })
      }else{
        this.dlShare = true  // 弹窗邀请帮卖分享
      }
    },
    // 点击立即分享
    _shareNow(){
      this.shareObj.isShareType = 1 //普通分享
      this.dlShare = true  // 分享
    },
    //  分享相关分割线····················································end

    // 获取他人用户信息
    getOthersInfoFn (accountId) {
      const that = this
      User.getOthersInfo({accountId: accountId}).then(res => {
        that.otherUserInfo = res.data

        // 通过邀请帮卖进入
        if(that.routeData.applyForHelp && that.isLogin){
          User.getRelation({idCode: that.routeData.idCode}).then(res => {
            that.getRelationType = res.data.relation
            if ([0,1,3].includes(res.data.relation)) {
              that.isHelpSellingShow = true
            }else{
              that.isHelpSellingShow = false
            }
          })
        }
      })
    },
    // 获取跟团记录
    async _getShopList() {
      this.getParams = {
        currentPage: 1,
        pageSize: 5, 
        spuId: this.goods.spuId,
      };
      const { data } = await dynamic.getBuyLog(this.getParams); 
      this.loadLogin = true
      this.shopList = data.records
      this.finish = data.total <= 5
    },
    // 加载更多
    async _getMoreShopList(){
      if(this.finish || !this.shopList.length || this.getMoreLoading) return
      this.getMoreLoading = true // 加载中
      this.getParams.currentPage++
      const { data } = await dynamic.getBuyLog(this.getParams);
      this.getMoreLoading = false // 加载中
      this.shopList.push(...data.records)
      this.finish = data.total <= (this.getParams.currentPage * 5)
    },

    // 获取笔记列表
    async _getMaterialList(){
      let params = {
        currentPage: 1,
        pageSize: 5,
        sortType: 2,
        spuId: this.goods.spuId,
        shopWindowId: this.goods.shopWindowId
      }
      const { data } = await release.getPageBySpuId(params)
      data.records.forEach(v=>{
        v.useCount = Util.playvolume(v.useCount)
      })
      this.materialList = data.records
    },

    // 商品图片切换
    _changeCurrent(e) {
      this.goodsImgCurrent = e.detail.current;
    },
    showTimeFn(tiem) {
      return Util.showTime(tiem, 1);
    },
    // 订单支付成功
    paySuccessFn (e) { 
      orderApi.myBuyOrderListDetails({orderAllId:e}).then(res => {
        if (res.code == 200) {
          this.orderDetailsData = res.data
          this.paySuccessType = true
        }
      })
    },
    // 联系团长
    connectionFn () {
      if(this.$store.state.imUserInfo.imId === this.orderDetailsData.groupAccountId){
        return uni.showToast({
          title: '请勿联系自己',
          icon: 'none'
        })
      }
      this.paySuccessType = false
      this.navigateTo({url: '/pagesB/message/messageDetails?id='+this.orderDetailsData.groupAccountId})
    },
    // 订单详情
    goToOrderDetailsFn () {
      this.paySuccessType = false
      this.navigateTo({ url: `/pagesA/order/myOrderDetails?orderAllId=${this.orderDetailsData.orderAllId}` })
    },
    _snapUp(){
      if(!this.isLogin){
        this.navigateTo({url: '/pagesB/login/index'});
      }else{
        this.configOrderShow = true
      }
    },
    // 修改下级佣金比例成功
    _addSuccess(e){
      this.childShow = false
      uni.showToast({
        icon: 'none',
        title: '修改成功'
      })
      this._getGoodsDetails() // 更新详情
    },

    // 加入橱窗
    async addShowWindow(type){
      let params = {
        isShopWindow: 0,
        spuId: this.goods.spuId,
        commissionRatioLv2: this.userInfo.subordinateHelpSellCommissionRatio || 50
      }
      if(type === 1){ // 必须带shopWindowID
        params.superiorShopWindowId = this.routeData.shopWindowId
      }
      const { data } = await goods.updateShopWindow(params)
      this.goods.isShopWindow = 0
      return data
    },
    // 点击立即帮卖
    async immediatelyHelpSell(){
      const data = await this.addShowWindow(1) // 获取到新id,跳转到新的商品页，弹出帮卖成功弹窗-
      this.redirectTo({url: `/pagesB/goods/goodsDetails?shopWindowId=${data}&helpSuccess=1`})
    },
    // 点击邀请帮卖
    inviteHelp(){
      // 如果是自营并已移除橱窗，提示加入橱窗
      if(this.goods.type === 1 && this.goods.isShopWindow === 1){
        this.editIsShopWindow = true
      }else{
        this._openShareHelpProfit()
      }
    },
    // 点击弹窗的加入并邀请
    async _inviteHelpShare(){
      this.editIsShopWindow = false
      const data = await this.addShowWindow()
      //邀请帮卖
      this._openShareHelpProfit()
    },
    // 关注
    attention(){
      dynamic.follow({followAccountId: this.otherUserInfo.accountId,isFollow: 1}).then((res)=>{
        this.otherUserInfo.followStatus = 1
        if(this.routerlength > 1){
          this.$store.commit('FOLLOW_TYPE', {
            accountId: this.otherUserInfo.accountId,
            followStatus: 1
          })
        }
        uni.showToast({
          icon: 'none',
          mask: true,
          title: '关注成功！'
        })
      })
    },
    // 返回
    goBackFn () {
      console.log(this.routerlength);
      if (this.routerlength <= 1) {
        this.switchTab({url: '/pages/index/index'})
        return
      }
      this.navigateBack()
    },
    // 跳转去作者主页
    goHomePage(){
      let routes = getCurrentPages()
      let pageUrlArr = ['pagesB/personalCenter/homePage']
      if (routes.length>=2&&pageUrlArr.includes(routes[routes.length-2].route)) {
        this.navigateBack({
          delta: 1
        })
        return
      }
      this.navigateTo({url: `/pagesB/personalCenter/homePage?accountId=${this.goods.accountId}`}); 
    },
    _scrollFn(e){
      this.scrollTop = e.detail.scrollTop
    },
    // 点击笔记复用
    _copyMaterial(item){
      this.clickMaterial.materialId = item.materialId
      if(item.isNeedPay){ // 需要支付佣金
        this.clickMaterial.modelShow = true
        if(item.isGoodsIssuer && item.isGoodsIssuer === 1){ // 供货
          this.clickMaterial.content = "复用当前笔记发布后，卖货出单后，你需要将帮卖佣金的10%支付给笔记创作者。"
        }else{
          this.clickMaterial.content = "复用当前笔记发布后，卖货出单后，你需要将你获得佣金的10%支付给笔记创作者。"
        }
      }else{
        this._configCopyMaterial()
      }
    },
    // 确定复用
    _configCopyMaterial(){
      this.clickMaterial.modelShow = false
      this.navigateTo({url: `/pagesA/release/issueEdit?materialId=${this.clickMaterial.materialId}&shopWindowId=${this.routeData.shopWindowId}`})
    }
  }
};
</script>



<style lang="scss" scoped>
.goodsDetails{
  height: calc(100% - 100rpx);
  .goBack_box {
    position: fixed;
    z-index: 998;
    width: 60rpx;
    height: 60rpx;
    left: 32rpx;
    top: 48px;
    transition: opacity .5s;
  }
  .goBack_box.opc0{
    opacity: 0;
  }
  .headBox{
    width:100%;
    height:376rpx;
    border-radius: 0 0 32rpx 32rpx;
    overflow: hidden;
    position: relative;
    .headGroupMsg{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 288rpx;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
      .headGroupBox{
        position: absolute;
        bottom: 32rpx;
        left: 0;
        width: 100%;
        padding: 0 32rpx;
        color: #FFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .headImgBox{
          width: 128rpx;
          height: 128rpx;
          border-radius: 50%;
          border: 1px dashed #FFFFFF;
          background-color: #FFFFFF;
          margin-right: 24rpx;
        }
        .guanzhuBtn{
          background: #E44435;
          border-radius: 8rpx;
          width: 128rpx;
          height: 48rpx;
          line-height: 48rpx;
          text-align: center;
          margin-left: 80rpx;
        }
      }
    }
  }

  .headBoxFixed{
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #FFF;
    opacity: 0 ;
    transition: opacity .5s;
    .headGroupBox{
      display: flex;
      align-items: center;
      padding-top: 8rpx;
      padding-bottom: 16rpx;
      .navBack{
        width: 64rpx;
        height: 64rpx;
        padding: 12rpx;
        margin-left: 24rpx;
        margin-right: 16rpx;
      }
      .headImgBox{
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        background-color: #FFFFFF;
        margin-right: 6rpx;
      }
      .guanzhuBtn{
        height: 48rpx;
        line-height: 48rpx;
        border-radius: 32rpx;
        padding: 0 16rpx;
        background-color: #E44435;
        color: #FFFFFF;
        margin-left: 6rpx;
        font-size: 24rpx;
      }
    }
  }
  .headBoxFixed.opc1{
    opacity: 1;
  }

  .goodsSwiper {
    position: relative;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 24rpx rgba(150, 151, 153, 0.16);
    .indicator {
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      font-size: 24rpx;
      border-radius: 32rpx;
      padding: 8rpx 20rpx;
      position: absolute;
      bottom: 24rpx;
      right: 32rpx;
    }
  }
  .goodsMsg{
    background-color: #FFFFFF;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 24rpx rgba(150, 151, 153, 0.16);
    .pliceBox {
      height: 128rpx;
      padding: 0 32rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .colorc {
        color: #C8C9CC;
      }
      .buyBtn{
        border: 1px solid #E44435;
        border-radius: 32rpx;
        padding: 8rpx 16rpx;
      }
      .buyBtn.disabled{
        background: #F2F3F5;
        border-color: #F2F3F5;
        color: #C8C9CC;
      }
    }

    .nameBox {
      padding: 0 32rpx 24rpx 32rpx;
      line-height: 40rpx;
      font-weight: bolder;
    }
    .descriptionBox {
      padding: 0 32rpx 32rpx 32rpx;
      line-height: 32rpx;
      font-size: 24rpx;
      color: #969799;
    }
  }
  
  .instruction{
    background-color: #FFFBE8;
    padding: 24rpx 32rpx;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 24rpx rgba(150, 151, 153, 0.16);
    .editBtn1{
      padding: 4rpx 10rpx;
      border: solid 1rpx #DCDEE0;
      border-radius: 4rpx;
    }
  }
  
  .materialBox{
    background-color: #FFF;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 24rpx rgba(150, 151, 153, 0.16);
  }

  .goodsShopBox {
    background-color: #fff;
    padding: 0 24rpx;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 24rpx rgba(150, 151, 153, 0.16);
    .shopForBox {
      display: flex;
      align-items: center;
      .shopName {
        display: flex;
        align-items: center;
        flex: 1;
      }
    }
    .headBox1 {
      width: 48rpx;
      height: 48rpx;
      border-radius: 50%;
      overflow: hidden;
    }
    .ov1 {
      @include toe();
    }
    .skuContent {
      display: flex;
      flex: 1;
    }
    .skuName {
      max-width: calc(100% - 60rpx);
      @include bov(1)
    }
  }

  .goodsDetailsPage{
    margin-top: 24rpx;
    background-color: #FFFFFF;
  }
  .disabledBtn{
    background: #F2F3F5;
    color: #C8C9CC;
    .posab{
      position: absolute;
      bottom: 100%;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      background: #FFFBE8;
      line-height: 72rpx;
      padding: 0 32rpx;
      .colorZS{
        color: #ED6A0C;
      }
    }
  }
  .helpSellTips{
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    right: 24rpx;
    background: linear-gradient(90deg, #FDEDC7 0.12%, #FEDFA6 100%);
    border-radius: 8rpx 8rpx 8rpx 0px;
    color: #B57A43;
    font-size: 20rpx;
    height: 32rpx;
    line-height: 32rpx;
    padding: 0 8rpx;
  }
  .bgf{
    background-color: #FFF;
  }
  .materialForBox{
    margin-left: 32rpx;
    .materialImage{
      width: 240rpx;
      height: 300rpx;
      border-radius: 8rpx;
      overflow: hidden;
      position: relative;
      .posabNum{
        position: absolute;
        bottom: 16rpx;
        left: 16rpx;
        display: flex;
        align-items: center;
        color: #FFF;
      }
    }
    .forImage{
      width: 48rpx;
      height: 48rpx;
      border-radius: 50%;
    }
    .fuyonBtn{
      font-size: 24rpx;
      color: #E44435;
      padding: 8rpx 16rpx;
      border-radius: 32rpx;
      border: 1px solid #E44435;
    }
  }
}
.goodsDetails.disabled{
  height: calc(100% - 172rpx);
}
</style>